<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
			<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<!--<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div class="heaeder">
			<div class="search">
				<a class="iconfont icon icon-leimupinleifenleileibie"></a>
				<input type="search" placeholder="搜索你最想吃的菜"/>
				<a class="icon iconfont icon-icon"></a>
				<a class="icon iconfont icon-erweima"></a>
			</div>
			<div class="banner">
				<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide">
				        	<a href=""><img src="img/banner3.png"/></a>
				        </div>
				        <div class="swiper-slide">
				        	<a href=""><img src="img/banner3.png"/></a>
				        </div>
				        <div class="swiper-slide">
				        	<a href=""><img src="img/banner3.png"/></a>
				        </div>
				        
				    </div>
				    <!-- 如果需要分页器 -->
				    <div class="swiper-pagination"></div>
				 
				</div>
			</div>
		</div>
		<dic class="content">
			<div class="menu">
				<ul>
					<li>
						<a href="###">
							<img src="img/menu4.png"/>
							<p>素菜</p>
						</a>
					</li>
					<li>
						<a href="###">
							<img src="img/menu5.png"/>
							<p>荤菜</p>
						</a>
					</li>
					<li>
						<a href="###">
							<img src="img/menu4.png"/>
							<p>凉菜</p>
						</a>
					</li>
					<li>
						<a href="###">
							<img src="img/menu5.png"/>
							<p>蛋羹</p>
						</a>
					</li>
					<li>
						<a href="###">
							<img src="img/menu4.png"/>
							<p>烘焙</p>
						</a>
					</li>
				</ul>
			</div>
			<div class="fond">
				<a class="icon iconfont icon-redshoucang"></a>
				<span>心动美食</span>
				<a class="icon iconfont icon-xiangyou"></a>
				<div class="swiper-content">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide">
				        	<a href=""><img src="img/banner3.png"/></a>
				        </div>
				        <div class="swiper-slide">
				        	<a href=""><img src="img/banner3.png"/></a>
				        </div>
				        <div class="swiper-slide">
				        	<a href=""><img src="img/banner3.png"/></a>
				        </div>
				        <div class="swiper-slide">
				        	<a href=""><img src="img/banner3.png"/></a>
				        </div>
				        
				    </div>
				    <!-- 如果需要分页器 -->
				    <div class="swiper-pagination"></div>
				</div>
				<ul>
				 		<li>
				 			<img src="img/meishi2.png"/>
				 			<p>各国美味欢</p>
				 			<span>¥88.00</span>
				 			<span>¥26.50</span>
							<span class="icon iconfont icon-icon"></span>				 			
				 		</li>
				 		<li>
				 			<img src="img/meishi.png"/>
				 			<p>小鸡炖蘑菇</p>
				 			<span>¥88.00</span>
				 			<span>¥26.50</span>
							<span class="icon iconfont icon-icon"></span>				 			
				 		</li>
				 		<li>
				 			<img src="img/meishi.png"/>
				 			<p>维生素瘦身</p>
				 			<span>¥88.00</span>
				 			<span>¥26.50</span>
							<span class="icon iconfont icon-icon"></span>				 			
				 		</li>
				 		<li>
				 			<img src="img/meishi2.png"/>
				 			<p>红烧猪大肠</p>
				 			<span>¥88.00</span>
				 			<span>¥26.50</span>
							<span class="icon iconfont icon-icon"></span>				 			
				 		</li>
				 	</ul>
			</div>
		</dic>
		<script>        
		  var mySwiper = new Swiper ('.swiper-container', {
		   
		    loop: true,
		    
		    // 如果需要分页器
		    pagination: '.swiper-pagination',
		  })  
		   var mySwiper = new Swiper ('.swiper-content', {
		   
		    loop: true,
		    
		    // 如果需要分页器
		    pagination: '.swiper-pagination',
		  }) 
		  </script>
	</body>
</html>
